<template>
	<view>
		<!--#ifdef MP-WEIXIN-->
		<view class="my-head">
		</view>
		<!--#endif-->
		<view class="my-top">
			<image src="/static/img/tx.png" class="my-top-img"></image>
			<view class="my-top-flex">
				<view class="my-top-title">{{contact_info.staff_name}}</view>
				<view>{{contact_info.staff_code}}</view>
			</view>
		</view>
		<view class="my-content">
			<view class="my-content-flex">
				<view class="my-content-about">部门</view>
				<view>{{contact_info.depart_name}}</view>
			</view>
			<view class="my-content-flex">
				<view class="my-content-about">职务</view>
				<view>{{contact_info.duty}}</view>
			</view>
		</view>
		<view class="index-notice" v-if="message_list.length > 0">
			<view class="iconfont icon-notice"></view>
			<an-notice-bar :message_list.sync="message_list" @getNoticeDetail="getNoticeId" style="width: 100%;">
			</an-notice-bar>
		</view>
		<view class="my-b">
			<uni-list>
				<uni-list-item title="电话信息" :showArrow="false" :thumb="static_media.img01" :show-badge="true"
					:badge-text="contact_info.mobile"></uni-list-item>
				<navigator open-type="navigate" url="/pages/login/changePwd" hover-class="none">
					<uni-list-item title="修改密码" :thumb="static_media.img02"></uni-list-item>
				</navigator>
			</uni-list>
			<view class="my-tc" @tap="get_logout">退出登录</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<zero-privacy :onNeed="false"></zero-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

	export default {
		data() {
			return {
				contact_info: [],
				message_list: [], //消息
			}
		},
		onShow() {
			this.get_contact_info()
			this.get_xiaoxi_list();
		},
		mounted() {},
		computed: {
			...mapState(['userInfo', 'loginStatus', 'loginInfo','TabBarBadge']),
			static_media() {
				return {
					img01: '/static/img/user-icon1.png',
					img02: '/static/img/user-icon2.png'
				}
			}
		},
		components: {
			uniList,
			uniListItem
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: '15942016081',
					success: function () {
						console.log('success');
					}
				});
			},
			async get_xiaoxi_list() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.noticeList,
					data: {
						page: 1,
						limit: 10
					},
					needLogin: true
				})
				if (res.code === 1) {
					this.message_list = []
					this.message_list = res.data.item
					// for (let i = 0; i < res.data.length; i++) {
					// 	this.message_list.push(res.data[i])
					// }
					this.$forceUpdate();
				}
			},
			//获取个人信息
			async get_contact_info() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.staffInfo,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					this.contact_info = res.data;
				}
			},

			async get_logout() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.logout,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					uni.reLaunch({
						url: '/pages/login/index'
					});
					this.$lib.$store.commit('clearUserInfo')
				}else{
					uni.reLaunch({
						url: '/pages/login/index'
					});
					this.$lib.$store.commit('clearUserInfo')
				}
			},
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}

	.lz-status_bar {
		background-color: #1172fd;
	}

	.my-top {
		background: #1172fd;
		display: flex;
		align-items: flex-start;
		padding: 22px;
		color: #fff;
		font-size: 14px;
		height: 92px;
	}

	.my-top-img {
		width: 67px;
		height: 67px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.my-top-title {
		font-size: 16px;
		margin-top: 12px;
		margin-bottom: 3px;
	}

	.my-top-flex {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		height: 67px;
	}

	.my-content {
		background: #fff;
		width: 86%;
		margin: 0 auto;
		margin-top: -22px;
		padding: 17px 13px;
		border-radius: 7px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.my-content-flex {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-right: solid 2px #f3f3f3;
		font-size: 15px;
	}

	.my-content .my-content-flex:last-child {
		border-right: none
	}

	.my-content-about {
		font-size: 14px;
		color: #9b9b9c;
		margin-bottom: 4px;
	}

	.my-b {
		background: #fff;
		width: 93%;
		margin: 0 auto;
		border-radius: 7px;
		margin-top: 13px;
	}

	.my-tc {
		background: #fff;
		width: 86%;
		margin: 0 auto;
		padding: 13px 13px;
		text-align: center;
		font-size: 15px;
		color: #1172fd;
		border-radius: 0 0 7px 7px;
	}

	.my-head {
		background: #1172fd;
		height: 50px;
	}

	.index-notice {
		width: 93%;
		margin: 10px auto;
	}
</style>
